<template>
	<view class="uiwu">
		<navigator v-if="info.state != 4" hover-class="none" :url="`/pages/prize/orderDetail1?id=${info.id}`" class="uiwu-item uiwu-flex-space">
			<text>查看订单详情</text>
			<uiwu-icon type="arrowright" size="18" color="#999"></uiwu-icon>
		</navigator>
		<view class="uiwu-box uiwu-flex-column">
			<image :src="info.product_image" mode="aspectFill"></image>
			<view class="item uiwu-flex-space">
				<text style="white-space: nowrap;">奖品名称</text>
				<text>{{info.product_name}}</text>
			</view>
			<view class="item uiwu-flex-space">
				<text>机器编号</text>
				<text>{{info.device_code}}</text>
			</view>
			<view class="item uiwu-flex-space">
				<text>获取时间</text>
				<text>{{uiwu.formatTimestamp(info.add_time * 1000)}}</text>
			</view>
			<view class="item uiwu-flex-space">
				<text>提交时间</text>
				<text>{{uiwu.formatTimestamp(info.exchange_time * 1000)}}</text>
			</view>
			<view class="item uiwu-flex-space">
				<text>奖品状态</text>
				<text style="color: #EF821E;">{{menuTablist[info.state]}}</text>
			</view>
			<view class="item uiwu-flex-space" v-if="info.state == 4">
				<text>奖品积分</text>
				<text style="color: #EF821E;">{{info.give_integral}}积分</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { prizeinfo } from '@/api/prize';
	import { ref } from 'vue';
	const menuTablist = ref<Array<string>>(['寄存中','待发货','待收货','已完成','已兑换'])
	const info = ref<object>({})
	const getPrizeInfo = async (id:string|number) : Promise<any> => {
		const { data } = await prizeinfo(id);
		info.value = data
		console.log(data);
	}
	onLoad(({id})=>{
		getPrizeInfo(id)
	})
</script>

<style lang="scss">
	page{
		background-color: #e6e6e6;
	}
	.uiwu-item{
		background-color: #fff;
		padding: 32rpx;
		margin-top: 20rpx;
		text{
			font-size: 28rpx;
			font-weight: 500;
			color: #444444;
		}
	}
	.uiwu-box{
		padding: 0 32rpx;
		background-color: #fff;
		margin-top: 1rpx;
		align-items: center;
		padding-top: 40rpx;
		image{
			width: 240rpx;
			height: 240rpx;
			border-radius: 16rpx;
			margin-bottom: 40rpx;
		}
		.item{
			padding: 20rpx 0;
			width: 100%;
			align-items: flex-start;
			text{
				font-size: 28rpx;
				font-weight: 500;
				color: #444444;
				&:nth-child(2){
					font-weight: bold;
					color: #231815;
					text-align: right;
					flex: 1;
					padding-left: 20rpx;
				}
			}
		}
	}
</style>
